import React, { Component } from 'react';
import { Toast, Form, Input, Button } from 'antd-mobile'


import '../../styles/Register/sms.scss'
import * as service from '../../api/index'
import jd from '../../assets/jd.png'

class sms extends Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            telcode: '',
            disable: true,
            disablebutton: false
        }
    }

    fromRef = React.createRef()

    async goregisterpwd() {//手机号、验证码验证
        var tel = this.props.location.state.tel//保存通过注册index页面跳转传过来的注册手机号
        console.log(tel,this.state.telcode);
        var res = await service.user_docheckcode({ tel, telcode:this.state.telcode.toString() })
        const fromdata = this.fromRef.current.getFieldsValue()
        console.log(fromdata.yanzheng)
        if (fromdata.yanzheng == this.state.telcode) { //将输入的验证码和请求回来的验证码做比较     
            Toast.show({
                content: '继续注册',
                duration: 1000,
            })
            this.props.history.push({ pathname: '/register/pwd', state: { tel:this.props.location.state.tel } })
        } else {
            Toast.show({
                content: '验证码错误',
                duration: 1000,
            })
        }
    }
    async yanzhen() {//发送请求验证码
        this.setState({ disablebutton: true })
        var tel = this.props.location.state.tel//保存通过注册index页面跳转传过来的注册手机号
        var res = await service.user_dosendmsgcode({ tel })//通过手机号发送验证码请求
        this.setState({ telcode: res.data.data })//将接收回来的验证码保存到state中
        console.log(res.data);
        Toast.show({
            content: `你的验证码是:${res.data.data}`,
            duration: 3000,
        })
        let count = 10
        var timeid = setInterval(() => {
            count--
            console.log(count);
            if (count <= 0) {
                clearInterval(timeid)
                this.setState({ disablebutton: false })
            }
        }, 1000);

    }
    //验证码为空校验
    yanzhenValidator = (_, value) => {
        if (value) {
            let reg = /^\d+$/;
            if (reg.test(value)) {
                this.setState({
                    loginname: value
                })
                return Promise.reject(this.setState({ disable: false }));
            }
            return Promise.reject(new Error('验证码无效'), this.setState({ disable: true }));
        } else {
            return Promise.reject(new Error('验证码不能为空'), this.setState({ disable: true }));
        }

    }

    render() {
        return (
            <div className='sms'>
                <div className="main">
                    <div className="mainbox">
                        <div className="img">
                            <img src={'https://img95.699pic.com/xsj/0z/yo/8b.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'} alt="" />
                        </div>
                        <div className="text">
                            我们将以短信或电话的形式将验证码发送给您
                        </div>
                    </div>
                    <Form layout='horizontal' ref={this.fromRef}
                        footer={
                            <Button disabled={this.state.disable} block color='primary' size='middle' shape='rounded' onClick={() => { this.goregisterpwd() }}>
                                下一步
                            </Button>
                        }     >
                        <Form.Item
                            name='yanzheng'
                            rules={[{ validator: this.yanzhenValidator }]}
                            extra={
                                <button disabled={this.state.disablebutton}
                                    className={'good  ' + (this.state.disablebutton == true ? 'active' : '')}
                                    onClick={() => { this.yanzhen() }} >
                                    发送验证码
                                </button>
                            }
                        >
                            <Input placeholder='请输入验证码' clearable />
                        </Form.Item>
                    </Form>

                </div>

            </div>
        );
    }
}

export default sms;
